const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
// 这里需要注意的是，15.x之后版本的vue-loader还需要配置插件
const vueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    // 入口文件
    entry: path.join(__dirname, './src/main.js'),

    // 出口文件
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    },

    // 插件管理
    plugins: [
        new htmlWebpackPlugin({
            // 指定模板页面，将来根据这个指定的路径生成内存中的页面
            template: path.join(__dirname, './src/index.html'),
            // 指定生成页面的名称
            filename: 'index.html'
        }),
        // 15.x之后的vue-loader配置插件2
        new vueLoaderPlugin()
    ],

    // 第三方模块
    module: {
        rules:[
            // css loader
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            // less loader
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            // sass loader
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
            // url loader
            { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader' },
            // 处理字体文件
            { test: /\.(ttf|woff2|woff|eot|svg)$/, use: 'url-loader'},
            // 处理 ES6 高级的语法, exclude 排除 node_modules 文件夹下面的js
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
            // 处理.vue文件
            { test: /\.vue$/, use: 'vue-loader' }

        ]
    }
}